<template>
  <Card class="!m-10px">
    <Button v-auth="'btn.Role.add'" type="primary" class="mb-10px" @click="visible = true"
      >添加角色</Button
    >

    <Table
      :columns="columns"
      :data-source="roleList"
      bordered
      :pagination="{
        // 当前页码
        current,
        // 每页条数
        pageSize,
        // 总数
        total,
        // 每页条数的可选项
        pageSizeOptions: ['3', '6', '9', '12'],
        // 显示快速跳转页码
        showQuickJumper: true,
        // 显示修改每页条数
        showSizeChanger: true,
        // 显示总数
        showTotal: (total) => `总共 ${total} 条`,
        onChange: getRoleList,
        onShowSizeChange: getRoleList,
      }"
      :loading="loading"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.dataIndex === 'index'"> {{ index + 1 }} </template>
        <template v-if="column.dataIndex === 'operator'">
          <Button type="primary" @click="showAssignRole(record)" v-auth="'btn.Role.assgin'">
            授权
          </Button>
          <Button
            danger
            class="
              !border-orange-500
              !text-orange-500
              hover:(
              !border-orange-300
              !text-orange-300
              )
              mx-10px
            "
            v-auth="'btn.Role.update'"
          >
            更新
          </Button>
          <Button danger v-auth="'btn.Role.remove'"> 删除 </Button>
        </template>
      </template>
    </Table>

    <Modal v-model:visible="visible" @ok="saveRole" title="添加角色">
      <Form :label-col="{ span: 6 }" class="m-10px">
        <FormItem label="角色名称"><Input v-model:value="role.roleName" /></FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'RoleList',
  });
</script>

<script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue';
  import { Card, Table, Button, Modal, Form, FormItem, Input } from 'ant-design-vue';
  import { getRoleListApi, saveRoleApi } from '/@/api/acl/role';
  import { RoleListModel, RoleModel } from '/@/api/acl/model/roleModel';

  const emits = defineEmits(['setIsShowRoleList', 'setRole']);

  const columns = [
    {
      title: '序号',
      className: 'w-70px !text-center',
      dataIndex: 'index',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      className: 'w-300px',
      dataIndex: 'operator',
    },
  ];
  const roleList = ref<RoleListModel>([]);
  const current = ref<number>(1);
  const pageSize = ref<number>(3);
  const total = ref<number>(0);
  const loading = ref<boolean>(false);

  const visible = ref<boolean>(false);
  const role = reactive<RoleModel>({ roleName: '' });

  const getRoleList = async (page: number, limit: number) => {
    loading.value = true;
    const res = await getRoleListApi(page, limit);
    roleList.value = res.items;
    total.value = res.total;
    current.value = page;
    pageSize.value = limit;
    loading.value = false;
  };

  onMounted(() => {
    getRoleList(current.value, pageSize.value);
  });

  const saveRole = async () => {
    await saveRoleApi(role);
    getRoleList(current.value, pageSize.value);
    visible.value = false;
  };

  const showAssignRole = (role) => {
    emits('setIsShowRoleList', false);
    emits('setRole', role);
  };
</script>
